<template>
  <div class="home">
    <!-- <h1 class="animate__animated animate__slideInRight">An animated element</h1> -->
    <button @click="show = !show">点击</button>
    <!-- 
      过度动画的类名：
      v-enter 表示动画进入的初始状态
      v-enter-active 动画过程
      v-enter-to表示动画结束的状态

      v-leave 表示动画离开的初始状态
      v-leave-active 离开的动画过程
      v-leave-to 表示动画离开结束的状态


      v将会被name的值替换掉
     -->
    <transition name="fade">
      <div v-show="show" class="div">这是要动画的元素</div>
    </transition>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      show: true
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  position: absolute;
  top: 50px;
  left: 0;
}
  .div {
    width: 200px;
    height: 200px;
    background-color: red;
  }
  .fade-enter-active, .fade-leave-active {
    transition: all 5s linear;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
    width: 0;
    height: 0;
  }
</style>




